<template>
  <div>
    <page-scroll :footer="false" :ishead-bg="false">
      <template #header>
        <gltitle
            :title="$t('lucky.doc10')"
            :is_name="true"
            :is_back="true"
            :is_lang="false"
            :is_kf="false"
            :is_right="false"
        ></gltitle>
      </template>
      <template #content>
        <div class="lucky">
          <img src="@/assets/images/logo22.png" class="logo"/>

          <img
              src="@/assets/images/lucky/unboxing.gif"
              class="gif-img"
          />

          <div class="btns">
            {{ $t("lucky.doc12") }}
            <van-count-down
                ref="countDown"
                :time="times"
                @finish="$router.replace('/lucky/prize')"
            >
              <template #default="timeData"> {{ timeData.seconds }}S</template>
            </van-count-down>
          </div>
        </div>
      </template>
    </page-scroll>
  </div>
</template>

<script>

export default {
  data() {
    return {
      times: 3000,
    }
  },
  activated() {
    this.$refs.countDown.reset();
    this.$refs.countDown.start();
  },
}
</script>

<style lang="less" scoped>
/deep/ .page {
  background: #120800 url('../../assets/images/lucky/go-bg.png') no-repeat 0 -.8rem !important;
  background-size: 100% 17rem !important;
}

/deep/ .head {
  background: transparent !important;

  .name {
    color: #fff !important;
  }
}

.lucky {
  margin-top: .4rem;
}

.gz_box {
  background: rgba(255, 255, 255, 1);
  border-radius: 0.1rem;
  color: #333;
  padding: 0.3rem;
  width: 6rem;

  .name {
    font-size: 0.38rem;
    margin-bottom: 0.1rem;
  }
}

.logo {
  display: block;
  height: 1.6rem;
  margin: 0 auto;
}

.gif-img {
  width: 100%;
}

.btns {
  margin: 1.4rem .32rem;
  height: 1rem;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.36rem;
  font-weight: 700;
  color: #fff;
  border-radius: .5rem;
  background: var(--CObackgroundLinear1);
  //background: url("../../assets/images/lucky/btn_start_bg.png");
  //background-size: 100% 100%;

  /deep/ .van-count-down {
    margin-left: 0.1rem;
    color: #fff;
    font-weight: 700;
    font-size: 0.4rem;
    line-height: 1.1rem;
  }
}
</style>
